<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="js/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="css/base.css">
    <style>
        body{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-row>
            <el-button type="primary" plain @click="handleAdd">新增</el-button>
            <el-button type="warning" plain @click="handlePermission">权限分配</el-button>
        </el-row>
        <el-row v-loading="loading">
            <el-col :span="24">
                <el-table
                        :data="tableData"
                        stripe
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column
                            type="selection">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="用户名">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="账号状态">
                    </el-table-column>
                    <el-table-column
                            prop="online"
                            label="是否在线">
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-popover
                                    placement="top"
                                    width="160"
                                    trigger="manual"
                                    v-model="scope.row.visible">
                                <p>确定删除吗？</p>
                                <div style="text-align: right; margin: 0">
                                    <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
                                    <el-button type="danger" size="mini" @click="handleDel(scope.row)">确定</el-button>
                                </div>
                                <el-button slot="reference" type="warning" size="small" @click="scope.row.visible = !scope.row.visible">删除</el-button>
                            </el-popover>
                        </template>

                        <!--下面这种，在vue data定义popoverVisible是不可取的，一旦改变popoverVisible整个table中所有的都会改变导致出现很多个popover，所以要在每一行的scope当中定义scope.row.visible,这样显示的才只会是当前行的-->
                        <!--<template slot-scope="scope">-->
                            <!--<el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>-->
                            <!--<el-popover-->
                                    <!--placement="top"-->
                                    <!--width="160"-->
                                    <!--trigger="manual"-->
                                    <!--v-model="popoverVisible">-->
                                <!--<p>确定删除吗？</p>-->
                                <!--<div style="text-align: right; margin: 0">-->
                                    <!--<el-button size="mini" type="text" @click="popoverVisible = false">取消</el-button>-->
                                    <!--<el-button type="danger" size="mini" @click="handleDel(scope.row)">确定</el-button>-->
                                <!--</div>-->
                                <!--<el-button slot="reference" type="warning" size="small" @click="popoverVisible = !popoverVisible">删除</el-button>-->
                            <!--</el-popover>-->
                        <!--</template>-->
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="1"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableSize">
                </el-pagination>
            </el-col>
        </el-row>

        <el-dialog title="编辑" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="用户名">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" type="password"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSave">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="权限编辑" :visible.sync="treeVisible">
            <el-tree
                    :data="treeData"
                    show-checkbox
                    node-key="id"
                    :default-checked-keys="treeCheckArr"
                    :props="defaultProps"
                    ref="tree"
            >
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="treeVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSavePermission">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</body>
<script src="js/base.js"></script>
<script src="js/vue/vue.js"></script>
<script src="js/element-ui/index.js"></script>
<script src="js/jquery/jquery-3.3.1.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            loading: false,
            table: {
                page: 0,
                limit: 10
            },
            tableData: [],
            tableSize: 0,
            // popoverVisible: false,
            dialogFormVisible: false,
            form: {},
            selectArr: [],
            treeData: [],
            treeCheckArr: [],
            treeVisible: false,
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            userid: null
        },
        methods: {
            handleEdit(row){
                this.form = Object.assign({}, row);
                delete this.form.status;
                delete this.form.online;
                this.dialogFormVisible = true;
            },
            handleAdd(){
                this.form = {};
                this.dialogFormVisible = true;
            },
            handleSave(){
                var _this = this;
                $.ajax({
                    url: 'user/saveUser',
                    data: this.form,
                    dataType: 'json',
                    type: 'post',
                    async: false,
                    success: function (res) {
                        if(res.code === 0){
                            _this.$message({message: res.msg, type: 'success'});
                        }else{
                            _this.$message({message: res.msg, type: 'warning'});
                        }
                        _this.dialogFormVisible = false;
                    },
                    error: function (res) {

                    }
                });
                this.getUsersInfo();
            },
            handleDel(row){
                console.log(row);
                var _this = this;
                $.ajax({
                    url: 'user/delUsersInfo',
                    data: {'id': row.id},
                    dataType: 'json',
                    type: 'get',
                    async: false,
                    success: function (res) {
                        if(res.code === 0){
                            _this.$message({message: res.msg, type: 'success'});
                        }else{
                            _this.$message({message: res.msg, type: 'warning'});
                        }
                    },
                    error: function (res) {

                    }
                });
                this.getUsersInfo();
            },
            handleSizeChange(val) {
                this.table.limit = val;
                this.getUsersInfo();
            },
            handleCurrentChange(val) {
                this.table.page = val - 1;
                this.getUsersInfo();
            },
            getUsersInfo(){
                var _this = this;
                _this.loading = true;
                $.ajax({
                    url: 'user/getUsersInfo',
                    data: _this.table,
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        if(res.code === 0){
                            _this.tableData = res.data;
                            _this.tableSize = res.size;
                        }else{
                            _this.$message({message: res.msg, type: 'warning'});
                        }
                        _this.loading = false;
                    },
                    error: function (res) {

                    }
                });
            },
            handleSelectionChange(val) {
                this.selectArr = [];
                this.selectArr = val;
            },
            handlePermission(){
                if(this.selectArr.length > 1 || this.selectArr.length < 1){
                    this.$message({message: '只能选择一条数据噢', type: 'warning'});
                }
                console.log('分配权限');
                var _this = this;
                _this.userid = this.selectArr[0].id;
                $.ajax({
                    url: 'user/getUserPermissions',
                    data: {'id':_this.userid},
                    dataType: 'json',
                    type: 'get',
                    async: false,
                    success: function (res) {
                        if(res.code === 0){
                            _this.treeData = res.data.treeData;
                            _this.treeCheckArr = res.data.checkNode;
                        }else{
                            _this.$message({message: res.msg, type: 'warning'});
                        }
                        _this.dialogFormVisible = false;
                    },
                    error: function (res) {

                    }
                });
                _this.treeVisible = true;
            },
            handleSavePermission(){
                //获取被选中的节点id
                var ids = this.$refs.tree.getCheckedKeys();
                console.log(ids);
                //发送修改权限的请求
                var _this = this;
                $.ajax({
                    url: 'user/updatePermissionsByUserId',
                    type: 'post',
                    data: JSON.stringify({'keys':ids,'userid':_this.userid}),
                    contentType: 'application/json;charset=utf-8',
                    success:function (res) {
                        if (res.code === 0) {
                            _this.$message({message: res.msg, type: 'success'});
                            _this.treeVisible = false;
                            parent.location.reload();
                        } else {
                            _this.$message({message: res.msg, type: 'warning'});
                        }
                    },
                    error:function (res) {
                        _this.$message({message: '提交失败', type: 'warning'});
                    }
                });
            }
        },
        mounted:function () {
            this.getUsersInfo();
        }
    });
</script>
</html>